
<style>
    .el-table {
        margin: 0 auto;
        margin-top: 50px;
    }

    .el-table-column {
        width: 100px;
    }

    .el-pagination{
        margin: 0 auto;
        margin-top: 50px;
    }
</style>
<template>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <div id="app">

                        <el-table
                                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                                style="width: 100%">
                            <el-table-column
                                    label="货号"
                                    prop="citem">
                            </el-table-column>
                            <el-table-column
                                    label="品名"
                                    prop="cname">
                            </el-table-column>
                            <el-table-column
                                    label="色号"
                                    prop="clrnum">
                            </el-table-column>
                            <el-table-column
                                    label="尺码"
                                    prop="size">
                            </el-table-column>
                            <el-table-column
                                    label="面料"
                                    prop="fabric">
                            </el-table-column>
                            <el-table-column
                                    label="出厂价格"
                                    prop="out_price">
                            </el-table-column>
                            <el-table-column
                                    label="零售价格"
                                    prop="sell_price">
                            </el-table-column>
                            <el-table-column
                                    label="里料"
                                    prop="material">
                            </el-table-column>

                            <el-table-column
                                    align="right">
                                <template slot="header" slot-scope="scope">
                                    <el-input
                                            v-model="search"
                                            size="mini"
                                            placeholder="输入关键字搜索"/>
                                </template>
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <div class="block">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-size="size"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
</div>

<script>
    $.getScript('new.js',function(){

    });
    $(function () {
        var vue1 = new Vue({
            el:"#app",
            data:{
                huang:"黄御挺",
                search: '',
                pageable:{},
                tableData:[],
                total:0,
                currentPage: 1,
                size:5

            },
            mounted: function () {
                this.handleCurrentChange(this.currentPage);
            },
            methods:{
                //表格
                handleEdit: function(index, row) {
                    console.log(index, row);
                },
                handleDelete: function(index, row) {
                    console.log(index, row);
                },
                //分页
                handleCurrentChange: function(page) {
                    this.currentPage = page;
                    var size = this.size;
                    var url = "clothes/list/" + page + "/" + size;
                    console.log("url:" + url);
                    axios.get(url).then(function (response) {
                        vue1.pageable = response.data;
                        vue1.tableData = vue1.pageable.content;
                        vue1.total = vue1.pageable.totalElements;
                        console.log("你好：" + JSON.stringify(vue1.tableData));
                    });
                }
            }
        })
    });
</script>

</template>